<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/util.js"></script>
    <style type="text/css">
        body {
            /*background-image: url("img/bg.jpg");*/
        }

        #app {
            border-radius: 4px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 3rem;
            width: fit-content;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
        }

        .form-item {
            margin-bottom: 2rem;
        }

        input {
            border: 1px solid #c5c5c5;
            padding: 0.3rem;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="text-align: center;margin-bottom: 2rem;font-size: 25px;font-weight: bold">添加老师信息页面</div>
    <form enctype="multipart/form-data" id="updateForm">
        <div class="form-item"> 账号：
            <input name="username" type="text"/>
        </div>
        <div class="form-item"> 姓名：<input name="name" type="text"/></div>
        <div class="form-item"> 年龄：<input name="age" type="text"/></div>
        <div class="form-item">
            性别：
            <input name="sex" type="radio" value="man"/>男
            <input name="sex" type="radio" value="woman"/>女
        </div>
        <div class="form-item">
            学科：
            <select id="course" name="courseId">
                <option>请选择</option>
            </select>
        </div>
        <div class="form-item"> 上传头像：<input name="photo" type="file"/><br/></div>
        <div class="form-item">
            <input class="btn btn-primary" id="submit" type="submit" value="添加"/>
            <input class="btn btn-warning" onclick="goBack()" style="margin-left: 2rem" type="button" value="返回"/>
        </div>

    </form>
</div>
<script>
    if (!isLogin()) {
        location.href = 'login.html'
    }
    if (!isAdmin()) {
        location.href = 'index.html'
    }
    function goBack() {
        location.href = "teaList.html"
    }

    $(function () {
        let name;
        getCourses()

        function getCourses() {
            $.ajax({
                url: "course?action=doGetCourses",
                type: "GET",
                success: function (data) {
                    let list = JSON.parse(data).data
                    console.log(list)
                    option = $("select");
                    for (let i = 0; i < list.length; i++) {
                        option.append($("<option value='" + list[i].id + "'></option>").text(list[i].name))
                    }
                }
            })
            $('#course').change(() => {
                name = $('#course').val()
                console.log(name)
                $('#course').val(name)
            });
        }

        $("#submit").click(function () {
            let formData = new FormData($("#updateForm").get(0));
            event.preventDefault();
            $.ajax({
                url: "teacher?action=doAddTeacher",
                type: "POST",
                data: formData,
                async: true,
                dataType: "json",
                processData: false, // 不要让 jQuery 处理数据
                contentType: false,
                success: function (data) {
                    let code = data.code;
                    if (code == 1) {
                        alert(data.msg)
                        window.location = "teaList.html"
                    } else if (code == -1) {
                        alert(data.msg)
                        window.location = "addTeacher.html"
                    }
                }
            })
        })


    })
</script>
</body>
</html>